<template>
	<div>
		<el-row v-for="(name,index) in editStatusArray" :key="index+'_'+selectedComponent.componentModel.id">
			<el-col :span="8" class="property-table-name-col">{{propertySet[index]["label"]}}</el-col>
			<el-col :span="16" class="property-table-value-col" @click.stop="onPropertyValueColClickHandler(index)">
				<label v-if="editStatusArray[index]==false || propertySet[index]['editor']=='label'"
					class="property-table-label">
					{{propertyValueArray[index]}}
				</label>
				<PropertyTextComponent v-else-if="propertySet[index]['editor']=='text'"
					:propertyName="propertySet[index]['key']" :propertyValue="propertyValueArray[index]"
					@change="onPropertyValueChangeHandler"></PropertyTextComponent>
				<PropertyTextareaComponent v-else-if="propertySet[index]['editor']=='textarea'"
					:propertyName="propertySet[index]['key']" :propertyValue="propertyValueArray[index]"
					@change="onPropertyValueChangeHandler"></PropertyTextareaComponent>
				<PropertySelectComponent
					v-else-if="propertySet[index]['editor']=='select' && propertySet[index]['key']=='dataSource'"
					:propertyName="propertySet[index]['key']" :propertyValue="propertyValueArray[index]"
					:selectItems="selectItems" @change="onPropertyValueChangeHandler"></PropertySelectComponent>
				<PropertySelectComponent v-else-if="propertySet[index]['editor']=='select'"
					:propertyName="propertySet[index]['key']" :propertyValue="propertyValueArray[index]"
					:selectItems="propertySet[index]['selectItems']" @change="onPropertyValueChangeHandler">
				</PropertySelectComponent>
				<PropertyCheckboxComponent v-else-if="propertySet[index]['editor']=='checkbox'"
					:propertyName="propertySet[index]['key']" :propertyValue="propertyValueArray[index]"
					:selectItems="propertySet[index]['selectItems']" @change="onPropertyValueChangeHandler">
				</PropertyCheckboxComponent>
				<PropertyMultiSelectComponent v-else-if="propertySet[index]['editor']=='multiselect'"
					:propertyName="propertySet[index]['key']" :propertyValue="propertyValueArray[index]"
					@change="onPropertyValueChangeHandler"></PropertyMultiSelectComponent>
			</el-col>
		</el-row>
	</div>

</template>

<script>
	import PropertyTextComponent from './PropertyTextComponent.vue';
	import PropertyTextareaComponent from './PropertyTextareaComponent.vue';
	import PropertySelectComponent from './PropertySelectComponent.vue';
	import PropertyCheckboxComponent from './PropertyCheckboxComponent.vue';
	import PropertyMultiSelectComponent from './PropertyMultiSelectComponent.vue'
	export default {
		name: "PropertyTable",
		components: {
			PropertyTextComponent,
			PropertyTextareaComponent,
			PropertySelectComponent,
			PropertyCheckboxComponent,
			PropertyMultiSelectComponent
		},
		data() {
			return {
				selectedComponent: null,
				propertySet: {},
				propertyValueArray: [],
				editStatusArray: [],
				selectItems: [],
			}
		},
		methods: {
			setSelectedComponent(component) {
				if (component == undefined || component == null) {
					this.editStatusArray = [];
					return;
				}
				this.selectItems = this.$store.state.mformDesigner.getDataSourceArray();
				this.selectedComponent = component;
				var propertySet = component.propertySet;
				if (this.selectedComponent.componentModel.type == "tabcontrol" && this.$store.state.isTabsChildClick) {
					propertySet = component.propertySet2;
				}
				this.setSelectedComponentModel(propertySet);
			},
			setSelectedComponentModel(propertySet) {
				this.propertySet = propertySet;
				var editStatusArray = [];
				var propertyValueArray = [];
				for (var i = 0; i < propertySet.length; i++) {
					var key = propertySet[i].key;
					editStatusArray.push(false);
					propertyValueArray.push(this.selectedComponent.getPropertyValue(key));
				}
				this.propertyValueArray = propertyValueArray;
				this.editStatusArray = editStatusArray;
			},
			onPropertyValueColClickHandler(index) {
				var editStatusArray = [];
				for (var i = 0; i < this.editStatusArray.length; i++) {
					if (i == index) {
						editStatusArray[i] = true;
					} else {
						editStatusArray[i] = false;
					}
				}
				this.editStatusArray = editStatusArray;
			},
			onPropertyValueChangeHandler(propertyKey, value) {
				var index;
				for (var i = 0; i < this.propertySet.length; i++) {
					if (this.propertySet[i]["key"] == propertyKey) {
						index = i;
						break;
					}
				}
				this.propertyValueArray[index] = value;
				this.selectedComponent.setPropertyValue(propertyKey, value);
			}
		}
	}
</script>

<style>
	.property-table-row {
		vertical-align: middle;
		line-height: 30px;
	}

	.property-table-name-col {
		border-right: 1px dashed #E1DFDD;
		border-bottom: 1px dashed #E1DFDD;
		padding-left: 5px;
		font-size: 14px;
		line-height: 30px;
	}

	.property-table-value-col {
		border-bottom: 1px dashed #E1DFDD;
		padding-left: 5px;
		font-size: 14px;
		line-height: 30px;
	}

	.property-table-label {
		line-height: 29px;
		display: inline-block;
		width: 100%;
	}
</style>
